<template>
	<view class="modal" :style="{'z-index':localShow?'999 !important':'-1 !important'}"> 
		<view style="min-height: 80vh" >
			<l-painter :hidden="!localShow"	 css="width: 750rpx; padding-bottom: 100rpx; background: linear-gradient(180deg,#ff971b 0%, #ff5000 100%)" pathType="url" ref="poster" performance>
				<l-painter-image
					v-if="userState.avatar"
					:src="userState.avatar"
					css="background: #ffffff; object-fit: cover; margin-left: 40rpx; margin-top: 40rpx; width: 84rpx; border: 2rpx solid #ffffff; box-sizing: border-box; height: 84rpx; border-radius: 50%;"
				/>
				<l-painter-view css="margin-top: 40rpx; padding-left: 20rpx; display: inline-block">
					<l-painter-text :text="userState.nickname + '的店'" css="display: block; padding-bottom: 10rpx; color: #ffffff; font-size: 32rpx; fontWeight: bold" />
					<l-painter-text :text="topText" css="color: rgba(255,255,255,.7); font-size: 24rpx" />
				</l-painter-view>
				<l-painter-view
					css="margin-left: 40rpx; margin-top: 30rpx; padding: 32rpx; box-sizing: border-box; background: #ffffff; border-radius: 16rpx; width: 670rpx; box-shadow: 0 20rpx 58rpx rgba(0,0,0,.15)"
				>
					<l-painter-image :src="img" css="object-fit: cover; object-position: 50% 50%; width: 606rpx; height: 606rpx;" />
					<l-painter-view v-if="props.price" css="margin-top: 32rpx; color: #FF0000; font-weight: bold; font-size: 28rpx; line-height: 1em;">
						<l-painter-text text="￥" css="vertical-align: bottom" />
						<l-painter-text :text="pricePrev" css="vertical-align: bottom; font-size: 58rpx" />
						<l-painter-text :text="priceLast" css="vertical-align: bottom" />
					</l-painter-view>
					<l-painter-view css="margin-top: 30rpx; display: flex">
						<l-painter-text
							uid="tag"
							css="position:absolute; top: 10rpx; padding: 5rpx 10rpx; color: #212121; background: #ffb400; font-size: 24rpx"
							text="邻居优选"
						></l-painter-text>
						<l-painter-text
							css="text-indent: calc(tag.width + 10rpx); flex: 1; padding-right: 20rpx; box-sizing: border-box; line-clamp: 2; color: #333333; line-height: 1.8em; font-size: 36rpx;"
							:text="lastText"
						></l-painter-text>
						<l-painter-image
							v-if="userState.store_mini_code"
							:src="userState.store_mini_code"
							css="background: #ffffff; object-fit: cover; margin-left: 40rpx; margin-top: 40rpx; width: 150rpx; border: 2rpx solid #ffffff; box-sizing: border-box; height: 150rpx; border-radius: 50%;"
						/>
					</l-painter-view>
				</l-painter-view>
				<view class="ops">
					<view class="btn cancel" @click="cancel">取消</view>
					<view class="btn save" @click="save">保存海报</view>
				</view>
			</l-painter>

		</view>
	</view>
</template>

<script setup lang="ts">
import { state as userState } from '../../store/user';
import { ref, onMounted, computed, watch, nextTick } from 'vue';
const showCode = ref();
const poster = ref();
const props = defineProps({
	show: {
		type: Boolean,
		required: true
	},
	topText: {
		type: String,
		default: 'Hi,我为您挑选了一件好物'
	},
	lastText: {
		type: String,
		default: '物美价廉,当天送达,快扫码体验吧~'
	},
	img: {
		type: String,
		required: true
	},
	price: {
		type: Number
	}
});
const pricePrev = ref('');
const priceLast = ref('');

const emits = defineEmits(['update:show']);
// const localShow = ref(true)

console.log(props);

// onMounted(()=>{
// 	console.log("hello world")
// 	console.log(props)
// 	showCode.value.open()
// })

const localShow = computed({
	set: (v) => {
		emits('update:show', v);
	},
	get: () => {
		return props.show;
	}
});


// onMounted(()=>{
// 		showCode.value.open();
// })


// watch(
// 	localShow,
// 	() => {
// 		console.log(localShow)
// 		if (localShow.value) {
// 			nextTick(() => {
// 				showCode.value.open();
// 			});
// 		} else {
// 			showCode.value.close();
// 		}
// 	}
// );

onMounted(() => {
	const str = ((props.price / 100.0).toFixed(2) + '').split('.');
	pricePrev.value = str[0];
	priceLast.value = '.' + str[1];
});
const save = () => {
	poster.value.canvasToTempFilePathSync({
		fileType: 'jpg',
		quality: 1,
		success: (res) => {
			// #ifndef H5
			uni.saveImageToPhotosAlbum({
				filePath: res.tempFilePath,
				success(res) {
					uni.showToast({
						title: '已保存到相册',
						icon: 'success',
						duration: 2000
					});
				}
			});
			// #endif
		},
		fail(e) {
			console.log('???????????', e);
		}
	});
};

const cancel = () => {
	localShow.value = false;
};
</script>

<style scoped lang="scss">
.ops {
	background: white;
	display: flex;
	width: 100%;
	padding: 10px;
	.btn {
		text-align: center;
		color: white;
		line-height: 50px;
		height: 50px;
		width: 45%;
		margin: 0 auto;
		border-radius: $uni-border-radius-lg;
	}

	.cancel {
		background: #e8e460;
	}

	.save {
		background: #a5d63f;
	}
}
.modal{
	position: absolute;
	left: 0;
	top: 0;
	width:100%;
	height:100vh;
	background:white;
}
</style>
